<template>
  <a-cascader
    class="c-category"
    :popupClassName="popupClassName"
    v-model="cascader"
    :defaultValue="value"
    :options="options"
    :field-names="{
      label: 'categoryName',
      value: 'id',
      children: 'children'
    }"
    expand-trigger="hover"
    :placeholder="placeholder"
    :popupStyle="popupStyle"
    :display-render="displayRender"
    @change="change"
    :disabled="disabled"
    :getPopupContainer="getPopupContainer"
    @popupVisibleChange="popupVisibleChange"
  >
    <a-select
      v-model="selectValue"
      :open="false"
      mode="multiple"
      :maxTagCount="10"
      @deselect="deselect"
      placeholder="请选择交易品种，可多选"
      class="multiple"
      v-if="multiple"
      allowClear
      :defaultValue="value"
    >
      <a-select-option v-for="item in selectOptions" :key="item.id">
        {{ item.categoryName }}
      </a-select-option>
      <a-icon slot="suffixIcon" type="down" />
    </a-select>
    <slot />
  </a-cascader>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    value: {
      type: Array
    },
    placeholder: {
      type: String,
      default: "请选择品种"
    },
    // 自定义浮层类名
    popupClassName: {
      type: String,
      default: null
    },
    // 自定义浮层样式
    popupStyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    getPopupContainer: {
      type: Function,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 需要过滤的品种id
    filterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否只返回选中品种的所有信息
    getItem: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cascader: [],
      options: [],
      selectOptions: [],
      selectValue: []
    };
  },
  computed: {
    ...mapState({
      // 动态主路由
      categoryDatas: state => state.category
    })
  },
  watch: {
    value(n) {
      console.log('新的值=', n)
      this.cascader = n;
      this.selectValue = n;
    }

  },

  methods: {
    // 选择项发生变化时触发
    change(val) {
      if (this.multiple) {
        // 多选时执行
        // 没选中的才push，避免重复添加
        if(!this.selectValue) this.selectValue = []
        if (this.selectValue.indexOf(val[val.length - 1]) === -1) {
          this.selectValue.push(val[val.length - 1]);
          this.$emit("input", this.selectValue);
          this.$emit("change", this.selectValue);
        }
      } else {
        let valItem;
        if (this.getItem) {
          valItem = this.getFutureCode(val);
        } else {
          valItem = val;
        }
        // 单选时执行
        this.$emit("input", val);
        this.$emit("change", valItem);
      }
    },
    // 查询对应的futureCode
    getFutureCode(categoryId) {
      let level1 = categoryId[0];
      let level2 = categoryId[1];
      let res = [];
      let categoryList = JSON.parse(JSON.stringify(this.categoryDatas.categoryList));
      categoryList.forEach(item => {
        if (item.children && item.id === level1) {
          res[0] = item;
        } else if (!item.children && item.id === level2) {
          res[1] = item;
        }
      });
      return res;
    },
    // 多选时，取消选中触发
    deselect(val) {
      let idx = this.selectValue.indexOf(val);
      this.selectValue.splice(idx, 1);
      this.$emit("input", this.selectValue);
      this.$emit("change", this.selectValue);
    },
    // 只显示最后一级
    displayRender({ labels }) {
      return labels[labels.length - 1];
    },
    // 初始化数据
    init() {
      let data = JSON.parse(JSON.stringify(this.categoryDatas.categoryList));
      let tree = data.filter(i => i.children);
      for (let i = 0; i < data.length; i++) {
        tree.forEach(item => {
          if (
            data[i].categoryType &&
            data[i].categoryType === item.id &&
            this.filterList.indexOf(data[i].id) == -1
          ) {
            item.children.unshift(data[i]);
          }
        });
      }
      this.options = tree;
      // 多选时，设置selectOption
      if (this.multiple) {
        // 获取所有二级品种
        this.selectOptions = data.filter(i => !i.children);
      }
    },
    // 浮层显隐时触发
    popupVisibleChange(val) {
      this.$emit("visibleChange", val);
    }
  },
  created() {
    this.cascader = this.value;
    this.selectValue = this.value;
    this.init();
  }
};
</script>
<style lang="scss" scoped>
 
</style>
